<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工厂招聘平台 - 优质岗位直招</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }

        :root {
            --primary: #2196F3;
            --primary-dark: #1976D2;
            --primary-light: #E3F2FD;
            --accent: #FF9800;
            --text-dark: #263238;
            --text-medium: #546E7A;
            --text-light: #90A4AE;
            --background: #F5F9FC;
            --card-bg: #FFFFFF;
            --success: #4CAF50;
            --warning: #FFC107;
            --error: #F44336;
            --border: #E0E0E0;
        }

        body {
            background-color: var(--background);
            color: var(--text-dark);
            max-width: 750px;
            margin: 0 auto;
            padding-bottom: 80px;
        }

        /* 顶部区域 */
        .header {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white;
            padding: 15px 20px;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 15px rgba(33, 150, 243, 0.3);
        }

        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .back-btn {
            background: rgba(255, 255, 255, 0.2);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: white;
        }

        .page-title {
            font-size: 22px;
            font-weight: bold;
            text-align: center;
            flex: 1;
        }

        .user-actions {
            display: flex;
            gap: 12px;
        }

        .action-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
        }

        /* 搜索区域 */
        .search-container {
            padding: 0 15px 15px;
        }

        .search-box {
            display: flex;
            background: white;
            border-radius: 30px;
            padding: 0 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            height: 50px;
        }

        .search-box input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 16px;
            padding: 0 10px;
            color: var(--text-dark);
        }

        .search-btn {
            background: transparent;
            border: none;
            color: var(--primary);
            width: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        /* 筛选区域 */
        .filters {
            display: flex;
            padding: 15px;
            gap: 10px;
            overflow-x: auto;
            background: var(--card-bg);
            margin: 0 15px;
            border-radius: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .filter-btn {
            padding: 8px 15px;
            background: var(--primary-light);
            border-radius: 20px;
            color: var(--primary);
            font-size: 14px;
            white-space: nowrap;
            border: none;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .filter-btn.active {
            background: var(--primary);
            color: white;
        }

        /* 职位列表 */
        .jobs-section {
            padding: 0 15px;
            margin-top: 20px;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .section-title {
            font-size: 20px;
            font-weight: bold;
            position: relative;
            padding-left: 12px;
        }

        .section-title::before {
            content: "";
            position: absolute;
            left: 0;
            top: 5px;
            height: 18px;
            width: 4px;
            background: var(--primary);
            border-radius: 2px;
        }

        .view-all {
            color: var(--primary);
            font-size: 14px;
        }

        .jobs-container {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .job-card {
            background: var(--card-bg);
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            border-left: 4px solid var(--primary);
            position: relative;
        }

        .job-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(33, 150, 243, 0.15);
        }

        .urgent-tag {
            position: absolute;
            top: 20px;
            right: 20px;
            background: var(--error);
            color: white;
            font-size: 12px;
            padding: 4px 10px;
            border-radius: 20px;
        }

        .job-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .company-logo {
            width: 60px;
            height: 60px;
            border-radius: 12px;
            background: var(--primary-light);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: 24px;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .job-info {
            flex: 1;
        }

        .job-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .company-name {
            font-size: 14px;
            color: var(--text-medium);
            margin-bottom: 5px;
        }

        .job-meta {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 13px;
            color: var(--text-medium);
        }

        .meta-item i {
            color: var(--primary);
        }

        .salary {
            font-size: 20px;
            font-weight: bold;
            color: var(--error);
            margin: 10px 0;
        }

        .job-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }

        .tag {
            background: var(--primary-light);
            color: var(--primary);
            font-size: 12px;
            padding: 5px 12px;
            border-radius: 20px;
        }

        .tag.highlight {
            background: rgba(255, 152, 0, 0.1);
            color: var(--accent);
        }

        .job-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid var(--border);
        }

        .post-time {
            font-size: 12px;
            color: var(--text-light);
        }

        .apply-btn {
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 20px;
            padding: 8px 20px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .apply-btn:hover {
            background: var(--primary-dark);
            transform: scale(1.05);
        }

        /* 底部导航 */
        .footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            max-width: 750px;
            margin: 0 auto;
            background: var(--card-bg);
            display: flex;
            justify-content: space-around;
            padding: 12px 0;
            box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08);
            z-index: 100;
            border-radius: 25px 25px 0 0;
        }

        .footer-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            color: var(--text-medium);
            text-decoration: none;
            transition: all 0.3s ease;
            padding: 5px 15px;
            border-radius: 20px;
        }

        .footer-btn i {
            font-size: 22px;
            margin-bottom: 5px;
            transition: all 0.3s ease;
        }

        .footer-btn span {
            font-weight: 500;
        }

        .footer-btn.active, .footer-btn:hover {
            color: var(--primary);
            background: var(--primary-light);
        }

        .footer-btn.active i, .footer-btn:hover i {
            color: var(--primary);
            transform: translateY(-3px);
        }

        /* 响应式调整 */
        @media (max-width: 480px) {
            .job-card {
                padding: 15px;
            }
            
            .company-logo {
                width: 50px;
                height: 50px;
            }
            
            .job-title {
                font-size: 16px;
            }
            
            .salary {
                font-size: 18px;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部区域 -->
    <div class="header">
        <div class="top-bar">
            <a href="#" class="back-btn">
                <i class="fas fa-arrow-left"></i>
            </a>
            <div class="page-title">工厂招聘</div>
            <div class="user-actions">
                <a href="#" class="action-btn">
                    <i class="fas fa-search"></i>
                </a>
                <a href="#" class="action-btn">
                    <i class="fas fa-filter"></i>
                </a>
            </div>
        </div>
        
        <!-- 搜索区域 -->
        <div class="search-container">
            <div class="search-box">
                <input type="text" placeholder="搜索职位、工厂或地点...">
                <button class="search-btn">
                    <i class="fas fa-search"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 筛选区域 -->
    <div class="filters">
        <button class="filter-btn active">全部</button>
        <button class="filter-btn">普工</button>
        <button class="filter-btn">技工</button>
        <button class="filter-btn">质检</button>
        <button class="filter-btn">仓库</button>
        <button class="filter-btn">管理</button>
        <button class="filter-btn">包吃住</button>
        <button class="filter-btn">长白班</button>
    </div>

    <!-- 职位列表 -->
    <div class="jobs-section">
        <div class="section-header">
            <h2 class="section-title">热门工厂职位</h2>
            <a href="#" class="view-all">查看全部 <i class="fas fa-angle-right"></i></a>
        </div>
        
        <div class="jobs-container">
            <!-- 职位卡片1 -->
            <div class="job-card">
                <span class="urgent-tag">急聘</span>
                <div class="job-header">
                    <div class="company-logo">
                        <i class="fas fa-industry"></i>
                    </div>
                    <div class="job-info">
                        <h3 class="job-title">电子厂操作工</h3>
                        <div class="company-name">上海华星电子有限公司</div>
                        <div class="job-meta">
                            <div class="meta-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>浦东新区</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-briefcase"></i>
                                <span>1年以上经验</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="salary">¥5500-7500/月</div>
                
                <div class="job-tags">
                    <span class="tag">长白班</span>
                    <span class="tag">包吃住</span>
                    <span class="tag highlight">五险一金</span>
                    <span class="tag">加班补助</span>
                </div>
                
                <div class="job-footer">
                    <div class="post-time">今天发布</div>
                    <button class="apply-btn">立即申请</button>
                </div>
            </div>
            
            <!-- 职位卡片2 -->
            <div class="job-card">
                <div class="job-header">
                    <div class="company-logo">
                        <i class="fas fa-microchip"></i>
                    </div>
                    <div class="job-info">
                        <h3 class="job-title">SMT技术员</h3>
                        <div class="company-name">中芯科技制造厂</div>
                        <div class="job-meta">
                            <div class="meta-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>松江区</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-briefcase"></i>
                                <span>2年以上经验</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="salary">¥6500-8500/月</div>
                
                <div class="job-tags">
                    <span class="tag">两班倒</span>
                    <span class="tag">包吃住</span>
                    <span class="tag highlight">年终奖金</span>
                    <span class="tag">带薪年假</span>
                </div>
                
                <div class="job-footer">
                    <div class="post-time">2天前发布</div>
                    <button class="apply-btn">立即申请</button>
                </div>
            </div>
            
            <!-- 职位卡片3 -->
            <div class="job-card">
                <span class="urgent-tag">急聘</span>
                <div class="job-header">
                    <div class="company-logo">
                        <i class="fas fa-car"></i>
                    </div>
                    <div class="job-info">
                        <h3 class="job-title">汽车装配工</h3>
                        <div class="company-name">上汽集团制造工厂</div>
                        <div class="job-meta">
                            <div class="meta-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>嘉定区</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-briefcase"></i>
                                <span>不限经验</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="salary">¥6000-8000/月</div>
                
                <div class="job-tags">
                    <span class="tag">长白班</span>
                    <span class="tag">包吃住</span>
                    <span class="tag">五险一金</span>
                    <span class="tag highlight">节日福利</span>
                </div>
                
                <div class="job-footer">
                    <div class="post-time">昨天发布</div>
                    <button class="apply-btn">立即申请</button>
                </div>
            </div>
            
            <!-- 职位卡片4 -->
            <div class="job-card">
                <div class="job-header">
                    <div class="company-logo">
                        <i class="fas fa-box"></i>
                    </div>
                    <div class="job-info">
                        <h3 class="job-title">仓库管理员</h3>
                        <div class="company-name">京东物流仓储中心</div>
                        <div class="job-meta">
                            <div class="meta-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>青浦区</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-briefcase"></i>
                                <span>1年以上经验</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="salary">¥5000-7000/月</div>
                
                <div class="job-tags">
                    <span class="tag">长白班</span>
                    <span class="tag">包吃住</span>
                    <span class="tag">五险一金</span>
                    <span class="tag highlight">绩效奖金</span>
                </div>
                
                <div class="job-footer">
                    <div class="post-time">3天前发布</div>
                    <button class="apply-btn">立即申请</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="footer">
        <a href="#" class="footer-btn">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="footer-btn">
            <i class="fas fa-search"></i>
            <span>找职位</span>
        </a>
        <a href="#" class="footer-btn active">
            <i class="fas fa-industry"></i>
            <span>工厂招聘</span>
        </a>
        <a href="#" class="footer-btn">
            <i class="fas fa-file-alt"></i>
            <span>我的简历</span>
        </a>
        <a href="#" class="footer-btn">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>

    <script>
        // 筛选按钮交互
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelectorAll('.filter-btn').forEach(b => {
                    b.classList.remove('active');
                });
                this.classList.add('active');
                
                // 这里可以添加筛选逻辑
                const filterType = this.textContent;
                alert(`筛选条件: ${filterType}`);
            });
        });
        
        // 申请按钮交互
        document.querySelectorAll('.apply-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const jobTitle = this.closest('.job-card').querySelector('.job-title').textContent;
                this.textContent = "已申请";
                this.style.background = "#4CAF50";
                this.disabled = true;
                
                setTimeout(() => {
                    alert(`已成功申请 ${jobTitle} 职位`);
                }, 500);
            });
        });
        
        // 搜索功能
        document.querySelector('.search-btn').addEventListener('click', function() {
            const searchTerm = document.querySelector('input[type="text"]').value;
            if(searchTerm) {
                alert(`搜索: ${searchTerm}`);
            }
        });
        
        // 搜索框回车事件
        document.querySelector('input[type="text"]').addEventListener('keypress', function(e) {
            if(e.key === 'Enter') {
                document.querySelector('.search-btn').click();
            }
        });
    </script>
</body>
</html>